<template>
  <div class="container">
    <div class="app-container">
      <div class="basic-info">
        <el-row type="flex" justify="space-between">
          <span>基本信息</span>
          <i style="cursor:pointer;" class="el-icon-arrow-down" />
        </el-row>
      </div>
      <div class="main">
        <el-row type="flex" justify="space-between">
          <span>运输任务编号：<strong>{{ list.id }}</strong></span>
          <span>车牌号码：<strong>{{ list.truck&&list.truck.licensePlate }}</strong></span>
          <span>调度机构：<strong>{{ list.startAgency&&list.startAgency.name }}</strong></span>
          <span>起始地：<strong>{{ list.startAgency&&list.startAgency.name }}</strong></span>
        </el-row>
        <el-row type="flex" justify="space-between" style="margin-top:15px">
          <span>目的地：<strong>{{ list.endAgency&&list.endAgency.name }}</strong></span>
        </el-row>
      </div>

      <div class="basic-info">
        <el-row type="flex" justify="space-between">
          <span>任务轨迹</span>
          <i style="cursor:pointer;" class="el-icon-arrow-down" />
        </el-row>
      </div>
      <div class="main">
        <el-row type="flex" justify="space-between">
          <span>车牌号：<strong>{{ list.truck&&list.truck.licensePlate }}</strong></span>
          <span>司机：<strong>{{ list.driverName }}</strong></span>
          <span>计划发车时间：<strong>{{ list.planDepartureTime }}</strong></span>
        </el-row>
        <el-row type="flex" justify="space-between" style="margin-top:15px">
          <span>实际发车时间：<strong>{{ list.actualDepartureTime }}</strong></span>
          <span>计划到达时间：<strong>{{ list.planArrivalTime }}</strong></span>
          <span>实际到达时间：<strong>{{ list.actualArrivalTime }}</strong></span>
        </el-row>
      </div>

      <div class="basic-info">
        <el-row type="flex" justify="space-between">
          <span>交付照片</span>
          <i style="cursor:pointer;" class="el-icon-arrow-down" />
        </el-row>
      </div>
      <div class="main" style="height:200px">
        <el-row type="flex" justify="space-around">
          <span><strong>货品照片: </strong><img :src="list.transportCertificate" alt="" srcset=""></span>
          <span><strong>凭证照片:</strong><img :src="list.deliverPicture" alt="" srcset=""></span>
        </el-row>
      </div>

      <div class="basic-info">
        <el-row type="flex" justify="space-between">
          <span>提货照片</span>
          <i style="cursor:pointer;" class="el-icon-arrow-down" />
        </el-row>
      </div>
      <div class="main" style="height:200px">
        <el-row type="flex" justify="space-around">
          <span><strong>货品照片: </strong><img :src="list.cargoPicture" alt="" srcset=""></span>
          <span><strong>凭证照片:</strong><img :src="list.cargoPickUpPicture" alt="" srcset=""></span>
        </el-row>
      </div>

      <div class="basic-info">
        <el-row type="flex" justify="space-between">
          <span>货品信息</span>
          <i style="cursor:pointer;" class="el-icon-arrow-down" />
        </el-row>
      </div>
      <div class="main" style="height:200px">
        <el-table :data="tableData" height="250" stripe style="width: 100%;">
          <el-table-column align="center" type="index" label="序号" />
          <el-table-column align="center" prop="id" label="运单编号" />
          <el-table-column align="center" prop="created" label="下单时间" />
          <el-table-column align="center" prop="order.senderName" label="发件人姓名" />
          <el-table-column align="center" prop="order.senderPhone" label="发件人电话" />
          <el-table-column align="center" prop="order.senderAddress" label="发件人地址" />
          <el-table-column align="center" prop="order.amount" label="货品数量" />
          <el-table-column align="center" label="操作">
            <el-button type="text">查看详情</el-button>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
import { getTransportDetailAPI } from '@/api/dispatch'
export default {
  name: 'TransportDetail',
  data() {
    return {
      activeName: '',
      list: {},
      tableData: []
    }
  },
  created() {
    this.detailList()
  },
  methods: {
    async detailList() {
      const res = await getTransportDetailAPI(this.$route.params.id)
      console.log(res.data.data)
      this.list = res.data.data
      this.tableData = res.data.data.transportOrders
    }
  }

}
</script>

<style lang="scss" scoped>
.basic-info{
    color: #2a2929;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    height: 60px;
    background-color: #f8faff;
    padding: 20px 40px 20px 44px;
}
.main{
    background-color: #fff;
    color: #303133;
    transition: .3s;
    height: 104px;
    padding: 20px 80px 20px 44px;
    margin-bottom: 20px;
}
img{
  height: 159px;
  width: 212px;
}
</style>
